<template>
  <page-header-wrapper>
  <div>
    <div class="page-card">
      <h-query :showKey="[]" :query="query" @search="search">
      
      </h-query>
    </div>
    <div class="page-card">
      <!-- <h-query :showKey="[]" :query="query" @search="search">
        <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添 加</a-button>
      </h-query> -->
      <div class="a-button-right">
        <UploadExcel action="/web/enforcementCases/read_EnforcementCases" download="/web/enforcementCases/write_EnforcementCases" @change="$refs.htable.refresh(true)" />
        <a-button type="primary" @click="add">添 加</a-button>
      </div>
      <h-table
        ref="htable"
        @init="getList"
        :config="config"
        :showHeadBgNone="true"
        :zebraStripes="true">
        <span slot="type" slot-scope="{text}">
          {{ type[text] }}
        </span>
        <span slot="examine" slot-scope="{text}">
          <span class="green" v-if="text == 1">已通过</span>
          <span class="red" v-else-if="text == 2">未通过</span>
          <span v-else>未审核</span>
        </span>
        <span slot="action" slot-scope="{text, record}">
          <a @click="look(record)">查看</a>
          <a-divider type="vertical"></a-divider>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"></a-divider>
          <a @click="remove(record)" class="red">删除</a>
        </span>
        <!-- <span slot="isHome" slot-scope="{text, record}">
          <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
        </span>
        <span slot="isIndex" slot-scope="{text, record}">
          <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
        </span> -->
      </h-table>

    </div>
  </div>
  </page-header-wrapper>
  
</template>
<script>
// eslint-disable-next-line
import { getEnforcementCases, getEnforcementCasesDetail, addEnforcementCases, deleteEnforcementCases, editEnforcementCases } from '@/api/db';
import createInfo from './action/createInfo';
import UploadExcel from '@/components/UploadExcel/Index'

export default {
  components: {
    createInfo,
    UploadExcel
  },
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '编号',
            dataIndex: 'number'
          },
          {
            align: 'center',
            title: '案由',
            dataIndex: 'cause'
          },
          {
            align: 'center',
            title: '立案时间',
            dataIndex: 'caseTime'
          },
          {
            align: 'center',
            title: '其他信息',
            dataIndex: 'information'
          },
          {
            align: 'center',
            title: '处罚措施',
            dataIndex: 'punish'
          },
          {
            align: 'center',
            title: '姓名',
            dataIndex: 'realName'
          },
          {
            align: 'center',
            title: '年龄',
            dataIndex: 'age'
          },
          {
            align: 'center',
            title: '审核状态',
            dataIndex: 'examine',
            scopedSlots: { customRender: 'examine' }
          },
          {
            align: 'center',
            title: '备注',
            dataIndex: 'remark'
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100,
          // showSizeChanger: true,
          // showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }
      },
      form: {

      },
      type: {
        0: '个人',
        1: '企业'
      },
      query: [
        {
          key: 'number',
          type: 'input',
          label: '编号'
        },
        {
          key: 'cause',
          type: 'input',
          label: '案由'
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        examine: 1
      }
    };
  },
  methods: {
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getEnforcementCases(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    add() {
      this.$router.push({path: '/db/enforcementCases/edit'})
    },
    edit({id}) {
      this.$router.push({path: '/db/enforcementCases/edit', query: { id  }})
    },
    look({id}) {
      this.$router.push({path: '/db/enforcementCases/edit', query: { id, type: 'detail' }})
    },
    submit() {
      this.$refs.htable.refresh();
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '确定要删除吗？',
        onOk() {
          deleteEnforcementCases({ id, isDelete: -1 }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
    change() {
      // this.$message.success(file.response.msg)
      this.$refs.htable.refresh(true);
    }
  }
};
</script>
<style lang="less" scoped>
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }
}
.a-button-right {
  display: flex;
}
</style>
